<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户收藏列表</title>
    <link rel="stylesheet" th:href="@{/assets/css/styles.css}">
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <script th:src="@{/assets/js/jquery.min.js}"></script>
    <script th:src="@{/assets/js/popper.min.js}"></script>
    <script th:src="@{/assets/js/bootstrap.min.js}"></script>
    <script th:src="@{/assets/js/custom.js}"></script>
    <script th:src="@{/assets/js/daterangepicker.js}"></script>
    <script th:src="@{/assets/js/dropzone.js}"></script>
    <script th:src="@{/assets/js/imagesloaded.js}"></script>
    <script th:src="@{/assets/js/ion.rangeSlider.min.js}"></script>
    <script th:src="@{/assets/js/jquery.magnific-popup.min.js}"></script>
    <script th:src="@{/assets/js/lightbox.js}"></script>
    <script th:src="@{/assets/js/markerclusterer.js}"></script>
    <script th:src="@{/assets/js/moment.min.js}"></script>
    <script th:src="@{/assets/js/morris.min.js}"></script>
    <script th:src="@{/assets/js/raphael.min.js}"></script>
    <script th:src="@{/assets/js/select2.min.js}"></script>
    <script th:src="@{/assets/js/slick.js}"></script>
    <script th:src="@{/assets/js/slider-bg.js}"></script>
    <script th:src="@{/assets/js/script.js}"></script>
    <link rel="stylesheet" th:href="@{/assets/css/colors.css}">
    <link rel="stylesheet" th:href="@{/assets/plugins/bootstrap-fileinput/css/fileinput.min.css}">
</head>
<body>
    <!-- 复用首页头部 -->
    <header th:replace="index::header"></header>
    <div class="container" style="margin-bottom: -20px; height: 695px; overflow: auto">
        <!-- 个人信息页 -->
        <section class="p-0">
            <div class="container-fluid p-0">
                <div class="row">
                    <!-- 左侧导航栏 -->
                    <div th:replace="sidebar::left"></div>
                    <!-- 右侧内容显示 -->
                    <div class="col-lg-9 col-md-8 col-sm-12"  style="height:695px;overflow:auto;">
                        <div class="dashboard-body">
                            <table class="property-table-wrap responsive-table bkmark" style="margin-top: -10px;margin-bottom: -30px;">
                                <tbody>
                                <tr>
                                    <th><i class="fa fa-file-text"></i>收藏列表</th>
                                    <th>操作</th>
                                </tr>
                                </tbody>
                                <!-- 循环显示订单信息 -->
                                <tr th:each="house:${housesMark}" th:if="${housesMark != null}">
                                    <!-- 订单、房子相关信息 -->
                                    <td class="dashboard_propert_wrapper" style="width: 640px;">
                                        <img th:src="@{|/assets/img/house/${house.thumbnailUrl}|}" style="margin-top: -20px;margin-bottom: -20px;">
                                        <div class="title">
                                            <h4><a th:href="@{|/houseDetail/${house.id}|}" target="_blank" th:text="${house.title}">房子标题</a></h4>
                                            <span th:text="${house.address}">房子地址信息</span>
                                        </div>
                                    </td>
                                    <!-- 操作 -->
                                    <td>
                                        <div style="border: 1px solid #c6afaf; border-radius: 5px; margin-bottom: 1px; width: 75px; text-align: center;">
                                            <a th:href="@{/mark/cancelMark(houseId = ${house.id})}">取消收藏</a>
                                        </div>
                                    </td>
                                </tr>
                            </table>
                            <!-- 分页 -->
                            <nav class="mt-5" th:if="${page.rows>0}" th:replace="index::pagination"></nav>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- 复用首页底部 -->
    <div th:replace="index::footer"></div>

    <script>
        $(function () {
            $("#myMarked").attr("class", "active");
        })
    </script>
</body>
</html>